import React, { Component } from "react";
import { View, Text, Image, Modal, StyleSheet, TouchableOpacity } from "react-native";
import {width,height} from "../../util/apdater_util";


export default class LogisticsInfo extends Component{
  constructor(props) {
    super(props);
    this.state={
      modalVisible:false
    }
  }
  show(){
    this.setState({modalVisible:true})
  }
  hide(){
    this.setState({modalVisible:false})
  }
  render() {
    return (
      <Modal visible={this.state.modalVisible} transparent={true}>
        <TouchableOpacity style={styles.PopupPage} activeOpacity={1} onPress={this.hide.bind(this)}>
          <View></View>
        </TouchableOpacity>
        <View style={styles.modalBox}>
          <View style={styles.flex}>
            <Image style={{width:22,height:22,borderRadius:11}} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
            <Text style={styles.deliveryCompany}>韵达快递 3400032048293424</Text>
            <View style={styles.btnBox}>
              <Text style={{color:'#B2B2B2',fontSize:11}}>复制</Text>
              <Text style={{color:'#B2B2B2',fontSize:11,marginLeft:18}}>打电话</Text>
            </View>
          </View>
          <View style={styles.logisticsItem}>
            <View style={styles.verticalTopLine}></View>
            <View style={{marginTop:20}}>
              <Image style={{width:22,height:22}} source={require('../../img/location.png')}></Image>
            </View>
            <View style={{flex:1,marginLeft:9,marginTop:20}}>
              <Text>派送中  11-11  12:00:12</Text>
              <Text>【上海市】您的包裹已从【上海浦西分拨中心】发出</Text>
            </View>
            <View style={styles.verticalBottomLine}></View>
          </View>
          <View style={styles.logisticsItem}>
            <View style={styles.verticalTopLine}></View>
            <View style={{marginTop:20}}>
              <Image style={{width:22,height:22}} source={require('../../img/location.png')}></Image>
            </View>
            <View style={{flex:1,marginLeft:9,marginTop:20}}>
              <Text>派送中  11-11  12:00:12</Text>
              <Text>【上海市】您的包裹已从【上海浦西分拨中心】发出</Text>
            </View>
            <View style={styles.verticalBottomLine}></View>
          </View>
        </View>
      </Modal>
    )
  }
}

const styles=StyleSheet.create({
  PopupPage:{
    position: "absolute",
    left: 0,
    top: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    width: width,
    height: height,
    justifyContent: "center",
    alignItems: "center"
  },
  modalBox:{
    position: 'absolute',
    left:15,
    bottom:28,
    width:width-30,
    height:height-250,
    backgroundColor:'#fff',
    borderRadius:10,
    paddingTop:18,
    paddingLeft:22
  },
  flex:{
    flexDirection:'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  deliveryCompany:{
    flex:1,
    marginLeft:9,
    color:'#222222',
    fontSize:12
  },
  btnBox:{
    flexDirection: 'row',
    justifyContent:'flex-end',
    alignItems:'center',
    marginRight:12
  },
  logisticsItem:{
    flexDirection:'row',
    justifyContent:'flex-start',
    marginRight: 30
  },
  verticalTopLine:{
    position:'absolute',
    backgroundColor:'#F6F6F6',
    width:1,
    height:20,
    top:0,
    left:11
  },
  verticalBottomLine:{
    position:'absolute',
    backgroundColor:'#F6F6F6',
    width:1,
    top:42,
    bottom:0,
    left:11
  }
})
